<template>
 <div class="app-container"  style="background-color:#FAFAFB;">
      
      <el-card class="box-card" shadow="never" style="width:70%;margin-left:100px;margin-top:32px;">
       <el-button style="float:right;margin-right:30%;margin-top:30px;" size="small" v-if="detail" @click="handelBack">返回</el-button> 
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="right" label-width="130px" style="width: 600px; margin-left:50px;margin-top:30px;">
        
        <el-form-item label="渠道名称" prop="channelName"  :rules="{ required: true,message: '请输入渠道名称',trigger: 'blur'}">
          <el-input v-if="detail === undefined" v-model="dataForm.channelName"></el-input>
          <span v-else>{{dataForm.channelName}}</span>
        </el-form-item>
        <el-form-item label="渠道简称" prop="alias" >
          <el-input v-if="detail === undefined" v-model="dataForm.alias"></el-input>
          <span v-else>{{dataForm.alias}}</span>
        </el-form-item>
        <el-form-item label="渠道营业执照号" prop="licenseNumber" >
          <el-input v-if="detail === undefined" v-model="dataForm.licenseNumber"></el-input>
          <span v-else>{{dataForm.licenseNumber}}</span>
        </el-form-item>
        <!-- <el-form-item label="渠道状态" prop="status"  :rules="{ required: true,message: '请选择渠道状态',trigger: 'change'}">
          <el-select v-if="detail === undefined" v-model="dataForm.status" clearable  placeholder="请选择" style="width:100%">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
           <span v-else>{{dataForm.status === 1 ? "启用" : "禁用"}}</span>
        </el-form-item> -->
        <el-form-item label="法人姓名" prop="legalPersonName" >
          <el-input v-if="detail === undefined" v-model="dataForm.legalPersonName"></el-input>
          <span v-else>{{dataForm.legalPersonName}}</span>
        </el-form-item>
        <el-form-item label="法人手机号" prop="mobile" :rules="{  pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur'] }">
          <el-input v-if="detail === undefined" v-model="dataForm.mobile"></el-input>
           <span v-else>{{dataForm.mobile}}</span>
        </el-form-item>
        <el-form-item label="法人身份证" prop="idCardNo" :rules="{  pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: ['blur'] }">
          <el-input v-if="detail === undefined" v-model="dataForm.idCardNo"></el-input>
          <span v-else>{{dataForm.idCardNo}}</span>
        </el-form-item>
        <el-form-item label="座机" prop="telephone" :rules="{ pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, message: '请输入正确的座机号', trigger: ['blur'] }">
          <el-input v-if="detail === undefined" v-model="dataForm.telephone"></el-input>
          <span v-else>{{dataForm.telephone}}</span>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }">
          <el-input v-if="detail === undefined" v-model="dataForm.email"></el-input>
          <span v-else>{{dataForm.email}}</span>
        </el-form-item>
        <el-form-item label="渠道类型" prop="channelType" >
         <DicSelect v-if="detail === undefined" dictType = "渠道类别" :dictValue="dataForm.channelType" v-on:dictValue="dataForm.channelType=$event"/>
         <span v-else>{{dataForm.channelTypeName}}</span>
        </el-form-item>
        <el-form-item label="合作状态" prop="cooperationStatus" >
         <DicSelect v-if="detail === undefined" dictType = "合作状态" :dictValue="dataForm.cooperationStatus" v-on:dictValue="dataForm.cooperationStatus=$event"/>
          <span v-else>{{dataForm.cooperationStatusName}}</span>
        </el-form-item>
        <el-form-item label="等级类别" prop="levelCategory" >
         <DicSelect v-if="detail === undefined" dictType = "等级类别" :dictValue="dataForm.levelCategory" v-on:dictValue="dataForm.levelCategory=$event"/>
          <span v-else>{{dataForm.levelCategoryName}}</span>
        </el-form-item>
        <el-form-item label="合作类别" prop="cooperationCategory" >
         <DicSelect v-if="detail === undefined" dictType = "合作类别" :dictValue="dataForm.cooperationCategory" v-on:dictValue="dataForm.cooperationCategory=$event"/>
          <span v-else>{{dataForm.cooperationCategoryName}}</span>
        </el-form-item>
        <el-form-item label="业务类别" prop="businessCategory" >
         <DicSelect v-if="detail === undefined" dictType = "业务类别" :dictValue="dataForm.businessCategory" v-on:dictValue="dataForm.businessCategory=$event"/>
         <span v-else>{{dataForm.businessCategoryName}}</span>
        </el-form-item>
        <el-form-item v-if="detail === undefined" label="渠道区域-省市区" prop="areaId" >
           <el-cascader v-model="regionValues" :options="regionList" clearable  placeholder="请选择区域" :props="{ expandTrigger: 'hover' }" style="width:100%;"></el-cascader>
          
        </el-form-item>
        <el-form-item v-if="detail === undefined" label="渠道区域-街道" prop="channelDetail" >
          <el-input v-model="dataForm.channelDetail"/>
        </el-form-item>
        <el-form-item v-if="detail" label="渠道区域" prop="channelDetail" >
          <span>{{dataForm.addressDetail}} {{dataForm.channelDetail}}</span>
        </el-form-item>
       
       
        
       
         <el-form-item>
        <div  v-if="detail === undefined">
           <el-button  type="primary" @click="handelBack()" style="width:150px;height:40px;">取消</el-button>
           <el-button  type="warning" @click="createData()" style="width:150px;height:40px;">提交</el-button>
        </div>
      </el-form-item>
      </el-form>
      </el-card>

  </div>
</template>



<script>
import { createOrUpdateChannel,detailChannel } from '@/api/channel'
import { listRegion,detailByAreaId } from '@/api/region'
import DicSelect from '@/components/select'

export default {
  name: 'borrower',
  components: { DicSelect },
  // 接受父组件的值
  props: {
     changeValue: undefined,
     projectId: undefined
    }, 
  data() {
    return {
      appointNextTime:undefined,
      updateParam: undefined,
      list: undefined,
      total: 0,
      listLoading: true,
      loading: false,
      projectList: undefined,
      regionList: undefined,
      options:[],
      value:undefined,
      fileList:[],
      borrowerId: undefined,
      regionValues: [],
      stepType: undefined,
      channelId: undefined,
      detail: undefined,
      dataForm: {
        status: undefined,
        channelType: undefined,
        cooperationStatus: undefined,
        levelCategory: undefined,
        cooperationCategory: undefined,
        businessCategory: undefined,
        channelName: undefined,
        channelProvince: undefined,
        channelCity: undefined,
        channelArea: undefined,
        channelDetail: undefined,
        alias: undefined,
        licenseNumber: undefined,
        email: undefined,
        legalPersonName: undefined,
        idCardNo: undefined,
        telephone: undefined,
        licenseNumber: undefined
      },
      item: undefined,
      data: [{
      }],
        rules: {
      },
      downloadLoading: false
    }
  },
  computed: {
  },
  created() {
    this.detail = this.$route.query.detail
    this.channelId = this.$route.query.channelId
    if( this.channelId!=undefined) {
      this.getChannelDetail()
    }
    this.getRegionList()
  },
  methods: {
     getRegionList() {
      listRegion()
        .then(response => {
          if(response.data != undefined ) {
            this.regionList = response.data
            
          }
        })
        .catch(() => {
        })
    },
     getChannelDetail() {
      detailChannel({channelId: this.channelId})
        .then(response => {
          if(response.data != undefined ) {
            this.dataForm = response.data
            this.regionValues.push(this.dataForm.channelProvince)
            this.regionValues.push(this.dataForm.channelCity)
            this.regionValues.push(this.dataForm.channelArea)
          }
        })
        .catch(() => {
        })
    },
    handelBack() {
      this.$router.push("/channel/list")
    },
    createData() {
      if( this.regionValues!=undefined && this.regionValues.length>0){
        this.dataForm.channelProvince = this.regionValues[0]
        this.dataForm.channelCity = this.regionValues[1]
        this.dataForm.channelArea = this.regionValues[2]
      }
      if( this.dataForm.id === undefined ) {
        this.dataForm.status = 1
      }
      this.dataForm.id = this.channelId
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          createOrUpdateChannel(this.dataForm)
            .then(response => {
                this.$notify.success({
                title: '成功',
                message: '提交成功'
              })
              this.$router.push("/channel/list")
            
            })
            .catch(response => {
            })
        }
      })
    },
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>
